<template>
	<view class="custom_icons" style="height:136rpx">
		<scroll-view :scroll-x="true" style="height:100%;">
			<view class="icons" :style="{width:item.data.length*96+120+'rpx', height:'100%'}">
				<navigator :url="'../index/channel?id=' + icon.channelId" v-for="(icon, index) in item.data" class="icon_item">
					<image :src="icon.url" :lazy-load="true" mode="aspectFill"></image>
					<view class="text">{{icon.text}}</view>
				</navigator>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'custom-icons',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {};
	},
	created() {
		console.log(this.$props.item);
	}
};
</script>

<style lang="less">
.custom_icons {
	margin:10rpx 0rpx;
	padding:10rpx;
	//background-color: #FFFFFF;
	//border-radius: 10rpx;
	navigator {
		height: 100%;
		float: left;
		margin: 0 10rpx;
		font-size: 24rpx;
		display:flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			margin:0 0 10rpx 0;
		}
		&:first-child {
			margin-left: 0;
		}
		&:last-child {
			margin-right: 0;
		}
	}
}
</style>
